<template>
  <div id="PersonalCenter">
    <!-- 头部 -->
    <v-header :isSelect='0'></v-header>
    <template v-if="!nowShow">
      <div class="PersonalCenter-content">
        <router-view />
      </div>
      <!-- 右边导航 -->
      <div class="PersonalCenter-nav">
        <div class="PersonalCenter-nav-advert">
          <!-- <img :src="banner"
               alt=""> -->
          <el-carousel :interval="5000"
                       arrow="never">
            <el-carousel-item v-for="(item,index) in banner"
                              :key="index">
              <img :src="item.img"
                   alt="">
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="PersonalCenter-nav-block">
          <template v-for="(item, index) in centerNav">
            <router-link :to="item.url"
                         :key="index">
              <div :class="centerNavIndex === item.url?'active' : ''"
                   @click="item.dialogStatus ? (item.dialogStatus=='1'?(dialogFormVisible = true) : (dialogVisible = true)) : active_nav(item.url)">
                <img :src="item.imgSrc"
                     alt="">
                <p>{{item.text}}</p>
              </div>
            </router-link>
          </template>
          <a :href="commonUrl"
             target="_blank">
            <div>
              <img src="../../assets/img/problem.png"
                   alt="">
              <p>常见问题</p>
            </div>
          </a>
        </div>
      </div>
    </template>
    <template v-else>
      <!-- 答题页面 -->
      <v-calendarView :statusNum='statusNum'></v-calendarView>
    </template>
    <!-- 页尾 -->
    <v-footer></v-footer>
    <!-- 关于我们的弹窗  -->
    <el-dialog title="关于我们"
               :visible.sync="dialogVisible"
               width="32%">
      <div class="dialog-font">
        <p>售前客户QQ：
          <span>
            <a target="_blank"
               :href='"http://wpa.qq.com/msgrd?v=3&uin="+about.pre+"&site=qq&menu=yes"'>
              {{about.pre}}
            </a>
          </span>
        </p>
        <p>售后客户QQ：
          <span>
            <a target="_blank"
               :href='"http://wpa.qq.com/msgrd?v=3&uin="+about.after+"&site=qq&menu=yes"'>
              {{about.after}}
            </a>
          </span>
        </p>
      </div>
      <div class="dialog-font">
        <p>咨询热线电话：{{about.tel}}</p>
        <p>移动版下载：
          <span>
            <a :href="about.android"
               target="_blank">Android </a>
            &nbsp;
            <a :href="about.ios"
               target="_blank"> IOS</a>
          </span>
        </p>
        <p>电脑版下载：
          <span>
            <a :href="about.PC"
               target="_blank">PC </a>
          </span>
        </p>
      </div>
      <div class="dialog-font">
        <p>官网：<span><a :href="about.url"
               target="_blank">{{about.url}}</a></span></p>
      </div>
      <div class="dialog-font">
        <p>备案号：{{about.record}}</p>
      </div>
    </el-dialog>
    <!-- 意见反馈的弹窗 -->
    <el-dialog title="意见"
               :visible.sync="dialogFormVisible"
               width="30%">
      <el-form :model="form">
        <el-form-item label="意见反馈">
          <el-input v-model="form.content"
                    type="textarea"
                    :autosize="{ minRows: 4}"
                    placeholder="请输入反馈内容"
                    auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="form.phone"
                    placeholder="请输入联系电话"
                    auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="click_opinion">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import Header from '@/components/Header.vue'
import CalendarView from '@/components/CalendarView.vue'
import Footer from '@/components/Footer.vue'

export default {
  name: 'PersonalCenter',
  data () {
    return {
      // 最近学习章节的状态
      statusNum: 3,
      // 关于我们的弹窗
      dialogVisible: false,
      // 意见反馈的弹窗
      dialogFormVisible: false,
      form: {
        content: '',
        phone: ''
      },
      // 个人中心导航
      centerNav: [
        {
          url: '/personalCenter/lately',
          imgSrc: require('../../assets/img/lately.png'),
          text: '最近学习章节',
          dialogStatus: ''
        },
        {
          url: '/personalCenter/active',
          imgSrc: require('../../assets/img/activation.png'),
          text: '激活的题目',
          dialogStatus: ''
        },
        {
          url: '/personalCenter/info',
          imgSrc: require('../../assets/img/info.png'),
          text: '资讯收藏',
          dialogStatus: ''
        },
        {
          url: '',
          imgSrc: require('../../assets/img/opinion.png'),
          text: '意见反馈',
          dialogStatus: '1'
        },
        {
          url: '',
          imgSrc: require('../../assets/img/about.png'),
          text: '关于我们',
          dialogStatus: '2'
        }
      ],
      // 个人中心的导航的索引
      // centerNavIndex: '',
      // banner图
      banner: '',
      // about关于我们
      about: '',
      // 常见问题的链接地址
      // commonUrl: JSON.parse(localStorage.getItem('customData')).url + '/index/question.html'
      commonUrl: ''
    }
  },

  components: {
    'v-header': Header,
    'v-calendarView': CalendarView,
    'v-footer': Footer
  },

  computed: {
    nowShow () {
      return this.$store.state.nowShow
    },
    centerNavIndex () {
      return this.$store.state.centerNavI
    }
  },

  watch: {},

  mounted () {
    this.$store.commit('change_nowShow', null)

    // 获取路由
    this.$store.state.centerNavI = this.$route.path
    // console.log(this.centerNavIndex === this.$route.path)
    // 获取关于我们
    // this.about = JSON.parse(localStorage.getItem('customData'))
    // 获取支付二维码
    this.$http.custom({
      phone: localStorage.getItem('mobile')
    }).then((res) => {
      this.about = res.data.data
      this.commonUrl = res.data.data.url + '/index/question.html'
      // 获取banner图
      this.$http.getBanner({
        type: 1
      }).then((r) => {
        // console.log('215banner', r)
        for (let item of r.data.data) {
        // console.log(item)
          item.img = res.data.data.url + item.img
        }
        this.banner = r.data.data
      }).catch((err) => {
        console.log(err)
      })
    }).catch((err) => {
      console.log(err)
    })
  },

  methods: {
    active_nav (i) {
      if (i) {
        this.$store.state.centerNavI = i
      }
    },
    // 意见反馈
    click_opinion () {
      // this.dialogFormVisible = false
      if (this.form.content) {
        this.$http.opinion({
          phone: localStorage.getItem('mobile'),
          content: this.form.content,
          tel: this.form.phone,
          type: 'option'
        }).then((res) => {
          console.log(res)
          this.dialogFormVisible = false
          this.$message({
            message: '反馈成功',
            type: 'success'
          })
        }).catch((err) => {
          console.log(err)
        })
      } else {
        this.$message({
          message: '请填写反馈内容',
          type: 'warning'
        })
      }
    }
  }
}

</script>
<style lang='less'>
#PersonalCenter {
  height: 100%;
  .PersonalCenter-content {
    float: left;
    width: 77%;
    height: calc(100% - 108px);
  }
  .PersonalCenter-nav {
    float: right;
    width: 23%;
    background: #f5f5f5;
    height: calc(100% - 108px);
    .PersonalCenter-nav-advert {
      .el-carousel__container {
        height: 215px;
        img {
          width: 100%;
          vertical-align:middle;
          object-fit: cover
        }
      }
      .el-carousel__indicators--horizontal{
        width: 100%;
        .el-carousel__indicator{
          .el-carousel__button{
            background: #64B5F6;
          }
        }
      }
    }
    .PersonalCenter-nav-block {
      overflow: hidden;
      padding: 50px 20px 0;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      a {
        color: #333333;
        margin: 0 5% 20px 0;
      }
      div {
        float: left;
        border-radius: 6px;
        width: 88px;
        height: 88px;
        font-size: 12px;
        // margin: 0 5% 20px 0;
        img {
          height: 50%;
          width: auto;
          margin-top: 15%;
        }
      }
      .active {
        background: #d9d9d9;
      }
      a:hover {
        color: #999;
      }
    }
  }
  .el-dialog__wrapper {
    .el-dialog {
      border-radius: 10px;
      .el-dialog__header {
        text-align: left !important;
        .el-dialog__title {
          font-size: 16px;
        }
        .el-dialog__headerbtn {
          background: #ff0000;
          border-radius: 50%;
          width: 18px;
          height: 18px;
          .el-icon-close {
            color: white;
            line-height: 18px;
          }
        }
      }
      .el-dialog__body {
        padding: 0 20px;
        text-align: left;
        .dialog-font {
          p {
            display: inline-block;
            margin: 10px 40px 20px 0;
            span {
              color: #0085ff;
              a {
                color: #0085ff;
                text-decoration: none;
              }
            }
          }
        }
      }
    }
  }
}
</style>
